@if (visible) {
  <abp-modal [(visible)]="visible" [busy]="modalBusy" [options]="{ size: 'lg' }">
    <ng-template #abpHeader>
      <h3>
        {{ 'AbpFeatureManagement::Features' | abpLocalization }}
        @if (providerTitle) {
          - {{ providerTitle }}
        }
      </h3>
    </ng-template>

    <ng-template #abpBody>
      <div class="row">
        @if (groups.length) {
          <div class="col-md-4">
            <ul
              ngbNav
              #nav="ngbNav"
              [(activeId)]="selectedGroupDisplayName"
              class="nav-pills"
              orientation="vertical"
            >
              @for (group of groups; track group.name) {
                <li [ngbNavItem]="group.displayName">
                  <a ngbNavLink>{{ group.displayName }}</a>
                  <ng-template ngbNavContent>
                    <h4>{{ selectedGroupDisplayName }}</h4>
                    <hr class="mt-2 mb-3" />

                    @for (feature of features[group.name]; track feature.id; let i = $index) {
                      <div class="mt-2" [ngStyle]="feature.style" (keyup.enter)="save()">
                        @switch (feature.valueType?.name) {
                          @case (valueTypes.ToggleStringValueType) {
                            <div class="form-check" [class.px-4]="!!feature.parentName">
                              <input
                                class="form-check-input"
                                type="checkbox"
                                [id]="feature.name"
                                [(ngModel)]="feature.value"
                                (ngModelChange)="onCheckboxClick($event, feature)"
                              />

                              <label class="form-check-label" [htmlFor]="feature.name">{{
                                feature.displayName
                              }}</label>
                              <ng-container
                                *ngTemplateOutlet="
                                  descTmp;
                                  context: { $implicit: feature.description }
                                "
                              ></ng-container>
                            </div>
                          }
                          @case (valueTypes.FreeTextStringValueType) {
                            <div class="mb-3 form-group" [class.px-2]="!!feature.parentName">
                              <label [htmlFor]="feature.name" class="form-label">{{
                                feature.displayName
                              }}</label>
                              <input
                                class="form-control"
                                type="text"
                                [id]="feature.name"
                                [(ngModel)]="feature.value"
                                [abpFeatureManagementFreeText]="feature"
                              />

                              <ng-container
                                *ngTemplateOutlet="
                                  descTmp;
                                  context: { $implicit: feature.description }
                                "
                              ></ng-container>
                            </div>
                          }
                          @case (valueTypes.SelectionStringValueType) {
                            @if (feature.valueType.itemSource?.items?.length) {
                              <div class="mb-3 form-group" [class.px-2]="!!feature.parentName">
                                <label [htmlFor]="feature.name" class="form-label">{{
                                  feature.displayName
                                }}</label>
                                <select
                                  class="form-select"
                                  [id]="feature.name"
                                  [(ngModel)]="feature.value"
                                >
                                  @for (
                                    item of feature.valueType.itemSource?.items;
                                    track item.value
                                  ) {
                                    <option [ngValue]="item.value">
                                      {{
                                        item.displayText?.resourceName +
                                          '::' +
                                          item.displayText?.name | abpLocalization
                                      }}
                                    </option>
                                  }
                                </select>
                                <ng-container
                                  *ngTemplateOutlet="
                                    descTmp;
                                    context: { $implicit: feature.description }
                                  "
                                ></ng-container>
                              </div>
                            }
                          }
                          @default {
                            {{ feature.displayName }}
                          }
                        }
                      </div>
                    }
                  </ng-template>
                </li>
              }
            </ul>
          </div>

          <ng-template #descTmp let-description>
            @if (description) {
              <small class="d-block form-text text-muted">{{ description }}</small>
            }
          </ng-template>

          <div class="col-md-8"><div class="py-0" [ngbNavOutlet]="nav"></div></div>
        }

        @if (!groups.length) {
          <div class="col">
            {{ 'AbpFeatureManagement::NoFeatureFoundMessage' | abpLocalization }}
          </div>
        }
      </div>
    </ng-template>

    <ng-template #abpFooter>
      <button abpClose type="button" class="btn btn-link">
        {{ 'AbpFeatureManagement::Cancel' | abpLocalization }}
      </button>

      @if (groups.length) {
        <abp-button
          buttonClass="btn btn-outline-primary"
          [disabled]="modalBusy"
          (click)="resetToDefault()"
          aria-hidden="true"
        >
          {{ 'AbpFeatureManagement::ResetToDefault' | abpLocalization }}
        </abp-button>
      }

      @if (groups.length) {
        <abp-button
          iconClass="fa fa-check"
          [disabled]="modalBusy"
          (click)="save()"
          aria-hidden="true"
        >
          {{ 'AbpFeatureManagement::Save' | abpLocalization }}
        </abp-button>
      }
    </ng-template>
  </abp-modal>
}
